<template>
	<view class="PaymentMiddlePage">
		<view class="payment f-background radius12 text-align margin-bottom-16">
			<image class="logo" :src="`${OnlineStatic}logo.png`" mode="widthFix"></image>
			<view class="payment-name font-weight-600 color3 size-28">领火饭票</view>
			<up-count-down :time="300000" format="mm:ss" @change="onChange">
				<view class="time font-weight-600 color3 size-36">
					<text>{{ timeData.minutes <10 ? `0${timeData.minutes}`:timeData.minutes }}:</text>
					<text>{{ timeData.seconds <10 ? `0${timeData.seconds}`:timeData.seconds }}</text>
				</view>
			</up-count-down>
			<view class="payment-item font-weight-400 color-8 size-24">剩余支付时间</view>
			<view class="order-code border-top dis-cen">
				<text class="font-weight-400 color9 size-28">订单编码</text>
				<text class="font-weight-400 color3 size-28">20240711153625896532</text>
			</view>
			<view class="order-code border-top dis-cen">
				<text class="font-weight-400 color9 size-28">需付金额</text>
				<text class="font-weight-400 color3 size-28">25豆 / ¥1</text>
			</view>
		</view>
		<!-- 支付方式 -->
		<view class="f-background radius12">
			<view class="order-code border-top dis-cen" @click="paIndex = 1">
				<view class="dis-ali">
					<image class="icons" :src="`${OnlineStatic}bld.png`" mode="widthFix"></image>
					<text class="font-weight-400 color3 size-28">豆支付(剩余:22个)</text>
				</view>
				<view class="open-select radius100 dis" :class="paIndex == 1? 'background':'open-on-select'">
					<image class="open-select-icon" :src="`${OnlineStatic}gou.png`" mode="widthFix" v-if="paIndex == 1">
					</image>
				</view>
			</view>
			<view class="order-code border-top dis-cen" @click="paIndex = 2">
				<view class="dis-ali">
					<image class="icons" :src="`${OnlineStatic}wxzf.png`" mode="widthFix"></image>
					<text class="font-weight-400 color3 size-28">微信支付</text>
				</view>
				<view class="open-select radius100 dis" :class="paIndex == 2? 'background':'open-on-select'">
					<image class="open-select-icon" :src="`${OnlineStatic}gou.png`" mode="widthFix" v-if="paIndex == 2">
					</image>
				</view>
			</view>
		</view>
		<!-- 底部 -->
		<view class="submit-order poflb width100">
			<up-button type="primary" :customStyle="{height: '76rpx',borderRadius: '100rpx'}"
				:color="settings.color" :throttleTime="2000" @click="onJumpPage">
				<text class="color-f font-weight-500 size-28">确认支付</text>
			</up-button>
			<view class="inset-bottom"></view>
		</view>
	</view>
</template>

<script>
	import { OnlineStatic } from "@/api/index"
	import { settings } from "@/utils/public"
	export default {
		data() {
			return {
				settings,
				OnlineStatic,
				paIndex: 1,
				timeData: {}
			}
		},
		methods: {
			onChange(e) {
				this.timeData = e;
			},
			onJumpPage(){
				uni.redirectTo({
					url: "/packagePayment/result/result"
				});
			}
		}
	}
</script>

<style lang="scss">
	.PaymentMiddlePage {
		padding: 16rpx;

		.payment {
			padding-top: 66rpx;

			.payment-name {
				margin-bottom: 38rpx;
			}

			.payment-item {
				padding-bottom: 68rpx;
			}
			.logo {
				width: 108rpx;
				height: 108rpx;
				margin: 0 auto 26rpx;
			}
		}

	// 支付方式

		.order-code {
			margin-left: 24rpx;
			padding: 28rpx 24rpx 28rpx 0;

			.icons {
				width: 36rpx;
				height: 36rpx;
				margin-right: 16rpx;
			}
		}
		// 底部
		.submit-order{
			padding: 28rpx 24rpx;
			box-sizing: border-box;
		}
	}
</style>